<template>
  <view class="custom-tabbar">
    <view
      class="tabbar-item"
      v-for="(item, index) in tabbarItems"
      :key="index"
      @click="switchTab(index)"
    >
      <view class="tabbar-icon">
        <text
          :class="['gui-icons', { active: currentIndex === index }]"
          v-if="index === 0"
          >&#xe608;</text
        >
        <text
          :class="['gui-icons', { active: currentIndex === index }]"
          v-if="index === 1"
          >&#xe614;</text
        >
        <text
          :class="['gui-icons', { active: currentIndex === index }]"
          v-if="index === 2"
          >&#xe6fe;</text
        >
      </view>
      <text class="tabbar-text" :class="{ active: currentIndex === index }">{{
        item.text
      }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["tabChange"]);

const tabbarItems = ref([
  { icon: "&#xe608;", text: "首页" },
  { icon: "&#xe727;", text: "分类" },
  { icon: "&#xe6fe;", text: "我的" },
]);

const switchTab = (index) => {
  emit("tabChange", index);
};
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
  padding-bottom: 20rpx;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.tabbar-icon {
  height: 48rpx;
  width: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10rpx;
}

.tabbar-icon-text {
  font-family: "gui-icons";
  font-size: 44rpx;
  color: #999;
}

.tabbar-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: #999;
}

.active {
  color: #1989fa !important;
}
.gui-icons {
  font-family: "gui-iconfont";
  font-style: normal;
  font-size: 42rpx;
  color: #b5b5b5;
}
</style>
